﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/ui/global/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link href="http://tv.speechb.com/lib/superui/content/ui/global/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <!-- Theme style -->
    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/adminlte/dist/css/AdminLTE.css">
    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/adminlte/dist/css/skins/_all-skins.min.css">
    <link href="http://tv.speechb.com/lib/superui/content/min/css/supershopui.common.min.css" rel="stylesheet"/>




    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/plugins/daterangepicker/daterangepicker.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

	<meta charset="utf-8" />
</head>
<body>
<section class="content-header">
    <h1>
        <small></small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">控制台</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
            <div class="inner">
                <h3 id="user_count">0</h3>
                <p> 用户注册量</p>
            </div>
            <div class="icon">
                <i class="ion ion-bag"></i>
            </div>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-md-3 col-sm-6  col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
            <div class="inner">
                <h3 id="vip_count">0</h3>
                <p>VIP用户量</p>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3 id = 'new_user_count'>0</h3>
                <p>今日新增用户量</p>
            </div>
            <div class="icon">
                <i class="ion ion-person-add"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
            <div class="inner">
                <h3 id = 'new_vip_count'>0</h3>
                <p>今日新增VIP量</p>
            </div>
            <div class="icon">
                <i class="ion ion-pie-graph"></i>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-purple">
            <div class="inner">
                <h3 id = 'online_user_count'>0</h3>
                <p>在线人数</p>
            </div>
            <div class="icon">
                <i class="ion ion-pie-graph"></i>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-navy">
            <div class="inner">
                <h3 id = 'session_count'>0</h3>
                <p>Session总数</p>
            </div>
            <div class="icon">
                <i class="ion ion-pie-graph"></i>
            </div>
        </div>
    </div>
</div>
<!-- /.row -->
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-7 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
    <!-- Tabs within a box -->
    <ul class="nav nav-tabs pull-right">
        <li class="active"><a href="#revenue-chart" data-toggle="tab">用户区域</a></li>
        <li class="pull-left header"><i class="fa fa-inbox"></i> 用户增长曲线</li>
    </ul>
    <div class="tab-content no-padding">
        <!-- Morris chart - Sales -->
        <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
        <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
    </div>
</div>
<!-- /.box -->
<!-- quick email widget -->
</section>

<!-- right col -->
</div>
<!-- /.row (main row) -->
</section>
<!-- ./wrapper -->

 
<!-- Bootstrap 3.3.6 -->
    <script src="http://tv.speechb.com/lib/superui/content/ui/global/jQuery/jquery.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="http://tv.speechb.com/lib/superui/content/ui/global/bootstrap/js/bootstrap.min.js"></script>
<script src="http://tv.speechb.com/lib/superui/content/min/js/supershopui.common.js"></script>

    <script src="http://tv.speechb.com/lib/superui/content/plugins/jQueryUI/jquery-ui.min.js"></script>
    <script src="http://tv.speechb.com/lib/superui/content/plugins/raphael/raphael.min.js"></script>
    <script src="http://tv.speechb.com/lib/superui/content/plugins/morris/morris.min.js"></script>
    <!-- Sparkline -->
    <script src="http://tv.speechb.com/lib/superui/content/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!-- jvectormap -->
    <script src="http://tv.speechb.com/lib/superui/content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="http://tv.speechb.com/lib/superui/content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <!-- jQuery Knob Chart -->
    <script src="http://tv.speechb.com/lib/superui/content/plugins/knob/jquery.knob.js"></script>
    <!-- daterangepicker -->
    <script src="http://tv.speechb.com/lib/superui/content/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- datepicker -->
    <script src="http://tv.speechb.com/lib/superui/content/plugins/datepicker/bootstrap-datepicker.js"></script>
    <!-- Bootstrap WYSIHTML5 -->
    <script src="http://tv.speechb.com/lib/superui/content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="http://tv.speechb.com/lib/superui/content/adminlte/dist/js/pages/dashboard.js"></script>
    <script>
        function requestCommon() {
            $.ajax({
                type : "GET",
                //请求地址
                url : "/admin/statistics/common",
                //请求成功
                success : function(result) {
                    if(result.code==1) {
                        $("#user_count").html(result.data.user_count);
                        $("#vip_count").html(result.data.user_vip_count);
                        $("#new_user_count").html(result.data.new_user);
                        $("#new_vip_count").html(result.data.new_user_vip);
                        $("#online_user_count").html(result.data.online_user_count);
                        $("#session_count").html(result.data.session_size);
                    } else {
                        $("#error").html("用户名或密码错误");
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.responseText);
                }
            });
        }
        requestCommon();

        function requestCommonYear() {
            $.ajax({
                type : "GET",
                //请求地址
                url : "/admin/statistics/user_vip_year",
                //请求成功
                success : function(result) {
                    if(result.code==1) {
                        /* Morris.js Charts */
                        // Sales chart
                        var area = new Morris.Area({
                            element: 'revenue-chart',
                            resize: true,
                            data: result.data,
                            xkey: 'y',
                            ykeys: ['new_user_count', 'new_vip_count'],
                            labels: ['用户数', 'VIP 数'],
                            lineColors: ['#a0d0e0', '#3c8dbc'],
                            hideHover: 'auto'
                        });
                        area.redraw();
                    } else {
                        $("#error").html("用户名或密码错误");
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.responseText);
                }
            });
        }
        requestCommonYear();


    </script>
</body>
</html>
